﻿@model Auction_Intranet.Models.BidModel

<div class="form-makebid form-makebid-screen">

@{
	    AjaxOptions options = new AjaxOptions{
	        HttpMethod = "Post",
            InsertionMode = InsertionMode.Replace,
	        UpdateTargetId = "make-bid-form-container",
            OnSuccess = "InitMakeBid",
            LoadingElementId = "progress-make-bid"
	    };       
	     
}

@using (Ajax.BeginForm("_FormMakeBid", "AJAXForm", options))
{
    <div id="progress-make-bid">
        <img src="@Url.Content("~/Content/images/icons/loading-stats.gif")" alt="Loading..." />
    </div>    
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Make Bid</legend>

        <div class="form-makebid-errors">                      
            @Html.ValidationMessageFor(model => model.bidForId)
            @Html.ValidationMessageFor(model => model.groups)
            @Html.ValidationMessageFor(model => model.groupId)
            @Html.ValidationMessageFor(model => model.date)
            @Html.ValidationMessageFor(model => model.dateFinal)
            @Html.ValidationMessageFor(model => model.startTime)
            @Html.ValidationMessageFor(model => model.endTime)
            @Html.ValidationMessageFor(model => model.roomId)
            @Html.ValidationMessageFor(model => model.biddingAmount)
            @Html.ValidationMessageFor(model => model.availableCredit)
            <div class="make-bid-form-errors">
            </div>
        </div> 
        <div class="editor-field for-choose">
            <div class="for-choose-labels">                
                <p>@Html.RadioButtonFor(model => model.bidForId, Model.bidFor[0].Value, new { @class = "single-selection selected", @checked = "checked" }) @Html.LabelFor(model => model.bidForId, Model.userName)</p>                
                <p>@Html.RadioButtonFor(model => model.bidForId, Model.bidFor[1].Value, new { @class = "group-selection", id = "group-selection" }) <label for="group-selection" >Group:</label></p>
            </div>
            <div class="editor-field groups-list">                                
                <select class="group-selection-list" id="groupId" name="groupId" disabled="disabled">
                    @foreach (var opt in Model.groups)
                    {
                        <option class="group-option" value="@opt.Value">@opt.Text</option>
                    }
                </select>
                
                <div class="hide">                    
                    @foreach (var item in Model.groupsCredit)
                    {
                        <p class="group-balance-@item.Id" data-val="@item.Balance"></p>
                    }
                </div>
            </div>
        </div>

        <div class="date-bid">
            <div class="editor-label">
                @Html.LabelFor(model => model.date)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.date, new { @class = "datepicker", autocomplete = "off", placeholder = "Bid date" })
            </div>
        </div>

        <div class="hide editor-label">
            @Html.LabelFor(model => model.dateFinal)
        </div>
        <div class=" hide editor-field">
            @Html.TextBoxFor(model => model.dateFinal)            
        </div>

        <div class="start-time">
            <div class="editor-label">
                @Html.LabelFor(model => model.startTime)
            </div>
            <div class="editor-field">
                @Html.DropDownListFor(model => model.startTime, Model.startTimes, new { @class = "start-times-list" })                
            </div>
        </div>

        <div class="end-time">
            <div class="editor-label">
                @Html.LabelFor(model => model.endTime)
            </div>
            <div class="editor-field">
                @Html.DropDownListFor(model => model.endTime, Model.endTimes, new { @class = "end-times-list" })                
            </div>
        </div>
             
        <div class="editor-label room-label">
            @Html.Label("Room")
        </div>
        <div class="editor-field rooms-list">   
            @{int ctn = 1;}
            @foreach (var item in Model.rooms)
            {                
                if (item.Value == "-1")
                {
                    <p>
                        @Html.RadioButtonFor(model => model.roomId, item.Value, new { id = "any-room", @class = "selected", @checked = "checked" })
                        <span><label for="any-room">@item.Text<span class="room-description">: Any room will be choosen.</span></label></span>
                    </p>

                }
                else
                { 
                    <p>
                        @Html.RadioButtonFor(model => model.roomId, item.Value, new { id = "room-" + ctn })
                        <span><label for="room-@ctn">@item.Text<span class="room-description"> - Capacity: @Model.roomsAvailable.ElementAt(0).Capacity persons</span></label></span>
                    </p>
                }
                ctn++;
            }                        
        </div>

        <div class="hide editor-label">
            @Html.LabelFor(model => model.availableCredit)
        </div>
        <div class="hide editor-field available-credit">
            @Html.EditorFor(model => model.availableCredit)            
        </div>

        <div class="amounts">
            <div class="editor-label amount-label">
                @Html.LabelFor(model => model.biddingAmount)
                <p>Available: <span class="available-balance">@Model.availableCredit</span></p>
            </div>
            <div class="editor-field spinner-label">            
                @Html.TextBoxFor(model => model.biddingAmount, new { @class = "spinner-make-bid", autocomplete = "off", placeholder = "bid amount" })
            </div>
        </div>
        <p>
            <input name="AJAXMakeBidFormPost" type="submit" value="Submit" title="Make Bid" class="input-button" onclick="return validateMakeBid()"/>
        </p>
    </fieldset>    
}

</div>

<script type="text/javascript">
    function InitMakeBid() {      
        var ok = @Model.success;
        //close colorbox
        if(ok === 1)
        {
            $("#make-bid-inline").colorbox.close();
            location.reload();
        }
        $(".datepicker").datepicker();
        $(".datepicker").datepicker("option", "minDate", new Date( @Model.date.Year , @Model.date.Month - 1, @Model.date.Day));
        $(".datepicker").datepicker( "option", "maxDate", new Date( @Model.dateFinal.Year , @Model.dateFinal.Month - 1, @Model.dateFinal.Day));
    }

    $(function () {

        var i = 0;
        $('.start-times-list option').each(function(){
            $(this).addClass(i.toString());
            i++;
        });
        var i2 = 0;
        $('.end-times-list option').each(function(){
            $(this).addClass(i2.toString());
            i2++;
        });
        $(".start-times-list").live("change",function () {
            $('.end-times-list option').each(function(){
                $(this).show();
            });
            var optionClass = parseInt($(this).find(":selected").attr("class"));
            $('.end-times-list option').each(function(){
                var option = $(this);
                var optionClassEnd = parseInt(option.attr("class"));
                if(optionClassEnd < optionClass)
                {
                    option.hide();
                }              
            });
        });


        $( ".spinner-make-bid" ).spinner({
            max: $(".available-credit input").val(),
            min: 1
        });
        
        $(".datepicker").datepicker("option", "minDate", new Date( @Model.date.Year , @Model.date.Month - 1, @Model.date.Day));
        $(".datepicker").datepicker( "option", "maxDate", new Date( @Model.dateFinal.Year , @Model.dateFinal.Month - 1, @Model.dateFinal.Day));
    });
</script>